<template>
  <view class="container">
    <view class="bg">
    </view>
    <view class="doctor">
      <view class="people" :style="{left:doctorSite?'85%':'50%'}">
        <view class="textBox" :class="doctorSite?'rightJian':'default'">
          <view class="text"> 看完漫画，请选择一张你认为和你经历过相似的场景是哪个？【双击可放大查看图片）</view>
        </view>
        <image src="/static/image/doctor.png"></image>
      </view>
    </view>
    <view class="content">
      <template v-if="cellShow">
        <coverage width="300" height="300" top="10" left="40">
          <view class="dialogBox">
            <selfCell :box-number="list.length">
              <view class="selfBox" v-for="(item,index) in list" @click="handleClick(item)"
                    @dblclick="handleDbClick(item)">
                <view class="imageBox" v-if="index !== list.length-1">
                  <image src="/static/image/reduce.png" mode="widthFix"></image>
                </view>
                <view class="imageBox" v-else>
                  <image src="/static/image/diagnose_allNone.png" mode="widthFix"></image>
                </view>
              </view>
            </selfCell>
          </view>
        </coverage>
      </template>
      <template v-if="selectShow">
        <coverage width="270" height="270" top="30" left="40">
          <view class="selectBox">
            <view class="selectItem" v-for="item in list" :class="item == 1?'active':''">{{ item }}</view>
          </view>
        </coverage>
      </template>
      <template v-if="sliderShow">
        <coverage width="416" height="180" top="120" left="40">
          <view class="sliderBox">
            <view class="sliderItemBox">
              <view class="sliderItem" v-for="item in sliderList">
                <view class="item" :style="{width:item.width,background:item.color,height:item.height}">
                  <!--                {{ item }}-->
                </view>
                <view class="itemNumber">
                  {{ item.value }}
                </view>
              </view>
            </view>
            <slider step="1" min="1" max="10" :value="sliderIndex" @change="handelSlectChange"></slider>
          </view>
        </coverage>
      </template>
<!--      <button @click="doctorSite = !doctorSite">切换</button>-->
    </view>

    <view class="mask" v-if="maskShow">
      <view class="swiperBox" v-if="swiperShow">
        <view class="swiperLeft" @click="handelSwiperLeft">
          <image src="/static/image/swiper_left.png"></image>
        </view>
        <view class="swiperRight" @click="handelSwiperRight">
          <image src="/static/image/swiper_right.png"></image>
        </view>
        <view class="spaceText swiperSpace">空格键确认图片</view>
        <swiper class="swiper" :current="swiperIndex" circular :indicator-dots="true" :autoplay="false" :duration="1000"
                indicator-color="#fff">
          <swiper-item v-for="item in list">
            <view class="swiper-item uni-bg-red">{{ item }}</view>
          </swiper-item>
        </swiper>
      </view>
      <view class="selectSecond" @keydown.space.once="handelSpace" v-if="selectSecondShow">
        <view class="spaceText swiperSpace">空格键确认图片</view>
        <view class="selectShowText">
          这是点击到的
        </view>
        <view class="selectSecondList">
          <view class="itemText" v-for="item in selectSecondList">
            {{item.text}}
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import coverage from '@/components/coverage/index.vue'
import selfCell from '@/components/selfCell.vue'
import {onMounted, ref} from "vue";
import {backHome} from "@/utils/event";

const clickTimer = ref()
const doctorSite = ref(false)
const list = ref([1, 2, 3, 4, 5])
const swiperIndex = ref(0)

const cellShow = ref(true) //宫格显示
const selectShow = ref(false) //一级选择题显示
const sliderShow = ref(false)  //进度条滑块显示
const sliderIndex = ref(5)
const sliderList = ref([
  {
    value: 1,
    color: '#2538DE',
    height: '27rpx',
    width: '5rpx'
  },
  {
    value: 2,
    color: '#4F3AFF',
    height: '37rpx',
    width: '6rpx'
  },
  {
    value: 3,
    color: '#703AFF',
    height: '46rpx',
    width: '9rpx'
  },
  {
    value: 4,
    color: '#6E3AFF',
    height: '52rpx',
    width: '10rpx'
  },
  {
    value: 5,
    color: '#943AFF',
    height: '58rpx',
    width: '11rpx'
  },
  {
    value: 6,
    color: '#983AFF',
    height: '64rpx',
    width: '12rpx'
  },
  {
    value: 7,
    color: '#C827F8',
    height: '70rpx',
    width: '13rpx'
  },
  {
    value: 8,
    color: '#FF3AC6',
    height: '77rpx',
    width: '14rpx'
  },
  {
    value: 9,
    color: '#FF3A87',
    height: '83rpx',
    width: '15rpx'
  },
  {
    value: 10,
    color: '#FF004A',
    height: '90rpx',
    width: '16rpx'
  }
])

const maskShow = ref(false)  //蒙层显示
const swiperShow = ref(false) //轮播图显示
const selectSecondShow = ref(false) //二级选择题显示
const selectSecondList = ref([
  {value:1,text:'1'},
    {value:2,text:'asd'},
    {value:3,text:'阿斯顿'},
    {value:4,text:'是的'},
    {value:5,text:'敏感敏感敏感'},
    {value:6,text:'地方'},
    {value:7,text:'阿斯顿'},
    {value:8,text:'接口'},
    {value:9,text:'敏感敏感敏感'},
    {value:10,text:'时代的'},
])

onMounted(()=>{
  // #ifdef APP-PLUS
  plus.key.addEventListener('keydown', handelSpace)
  // #endif
  // #ifdef H5
  window.addEventListener('keydown',handelSpace)
  // #endif
})
const handelSpace = (key)=>{
  //#ifdef APP-PLUS
  if(key.keyCode == 62){
    console.log('空格')
  }
  //#endif
  //#ifdef H5
  if(key.keyCode == 32){
     console.log('空格')
  }
  //#endif
}
const handelSlectChange = (event) => {
  console.log(event.detail.value)
}
const handelSwiperLeft = () => {
  if (swiperIndex.value === 0) {
    swiperIndex.value = list.value.length
  }
  swiperIndex.value -= 1
}
const handelSwiperRight = () => {
  if (swiperIndex.value === list.value.length) {
    swiperIndex.value = 0
  }
  swiperIndex.value += 1
}
const handleClick = (item: any) => {
  clearTimeout(clickTimer.value)
  clickTimer.value = setTimeout(() => {
    handleScelet(item)
  }, 300)
}
const handleScelet = (item: any) => {
  console.log(item)
}
const handleDbClick = (item: any) => {
  console.log('双击')
  clearTimeout(clickTimer.value)
  handelSwiper(item)
}
const handelSwiper = (item: any) => {
  console.log(item, '双击的item')
}
const handleclick = () => {
  console.log('dianji1')
}
//答题结束，返回首页
const handleEnd = ()=>{
  backHome(4)
}
</script>


<style scoped lang="scss">
.spaceText {
  position: absolute;
  width: 87.75rpx;
  padding-bottom: 10rpx;
  background: #d8d8d800;
  border-bottom: 1.17rpx solid #fff;
  border-left: 1.17rpx solid #fff;
  border-right: 1.17rpx solid #fff;
  border-bottom-left-radius: 10rpx;
  border-bottom-right-radius: 10rpx;
  font-weight: 400;
  font-size: 9.36rpx;
  color: #FFFFFF;
  letter-spacing: 1rpx;
  text-align: center;
  text-shadow: 0 0.78rpx 1.56rpx #00000057;
  line-height: 0;
}

.swiperSpace {
  bottom: 30rpx;
  right: 35rpx;
}

.container {
  width: 100%;
  height: 100%;
  background-image: url("@/static/image/diagnose_answer_bg.png");
  background-size: 100% 100%;
  position: relative;
  padding: 55rpx 25rpx;

  .bg {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-image: url("@/static/image/diagnose_answer_bg1.png");
    background-size: 100% 100%;
    z-index: 2;

  }

  .doctor {
    position: absolute;
    bottom: 40rpx;
    width: 100%;
    height: 240rpx;
    left: 0;
    z-index: 1;

    .people {
      position: absolute;
      left: 50%;
      top: 0;
      transform: translateX(-50%);
      width: 150rpx;
      height: 270rpx;
      transition: all 1s ease;

      image {
        width: 100%;
        height: 100%;
      }
    }

  }
  .content{
    position: relative;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 5;
  }
}

.textBox.default {
  left: 50%;
}

.textBox.rightJian {
  right: -70%;
}

.textBox {
  position: absolute;
  top: -70rpx;
  transform: translateX(-50%);
  width: 303.42rpx;
  background: #49f4ff40;
  //border: 0.39rpx solid #FFFFFF;
  border-radius: 11.31rpx 11.31rpx 11.31rpx 11.31rpx;
  padding: 10rpx 20rpx;
  backdrop-filter: blur(1.9rpx);

  .text {
    width: 100%;
    background-color: transparent;
    color: #FFFFFF;
    font-weight: 600;
    font-size: 11.7rpx;
    letter-spacing: 0;
    text-shadow: 0 0.78rpx 1.56rpx #00000057;
  }
}

.textBox.default::after {
  content: '';
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: -22rpx;
  //三角形
  width: 0;
  height: 0;
  border-left: 11rpx solid transparent;
  border-right: 11rpx solid transparent;
  border-top: 11rpx solid #49f4ff40;
  border-bottom: 11rpx solid transparent;
}

.textBox.rightJian::after {
  content: '';
  position: absolute;
  left: 90%;
  transform: translateX(-50%);
  bottom: -22rpx;
  //三角形
  width: 0;
  height: 0;
  border-left: 11rpx solid transparent;
  border-right: 11rpx solid transparent;
  border-top: 11rpx solid #49f4ff40;
  border-bottom: 11rpx solid transparent;
}

.selectBox {
  width: 100%;
  height: 100%;
  padding: 33rpx;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 20rpx;

  .selectItem {
    width: 100%;
    background: #FFFFFF;
    border-radius: 19.11rpx;
    padding: 5rpx;
    text-align: center;
    font-weight: 400;
    font-size: 13.26rpx;
    color: #201844;
    letter-spacing: 0;
  }

  .active {
    background: #353DFF;
    color: #fff;
  }
}

.dialogBox {
  width: 100%;
  height: 100%;
  padding: 12.87rpx;

  .selfBox {
    //width: 100%;
    //height: 100%;

    .imageBox {
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;

      image {
        width: 100%;
        border-radius: 15.6rpx;
        overflow: hidden;
      }
    }
  }
}

.sliderBox {
  padding: 30rpx 40rpx;
  display: flex;
  flex-direction: column;
  gap: 10rpx;
  position: relative;

  .sliderItemBox {
    width: 100%;
    height: 110rpx;
    display: flex;
    gap: 10rpx;
    justify-content: space-between;

    .sliderItem {
      width: 15rpx;
      height: 100%;
      //background-color: #409eff;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-end;
      gap: 7rpx;

      .item {
        background-color: #fff;
        border-radius: 20rpx;
      }

      .itemNumber {
        font-weight: 500;
        font-size: 11.7rpx;
        color: #FFFFFF;
        letter-spacing: 0;
        text-align: center;
      }
    }

  }
}

.mask {
  width: 100%;
  height: 100%;
  background: #0000008f;
  position: fixed;
  top: 0;
  left: 0;
  backdrop-filter: blur(2.8rpx);
  z-index: 9;

  .swiperBox {
    width: 100%;
    height: 100%;
    padding: 40rpx;
    position: relative;

    .swiperLeft, .swiperRight {
      width: 43.68rpx;
      height: 43.68rpx;
      position: absolute;
      top: 50%;
      transform: translate(-50%, -50%);

      image {
        width: 100%;
        height: 100%;
      }
    }

    .swiperLeft {
      left: 20%;
    }

    .swiperRight {
      right: 15%;
    }

    .swiper {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      width: 319.8rpx;
      height: 340.8rpx;

      .swiper-item {
        background-color: #fff;
        width: 100%;
        height: 319.8rpx;
      }

    }
  }
  .selectSecond{
    padding: 39rpx 36rpx;
    .selectShowText{
      width: 254.67rpx;
      background: #353DFF;
      border-radius: 19.11rpx;
      font-weight: 500;
      font-size: 13.26rpx;
      color: #FFFFFF;
      letter-spacing: 0;
      text-align: center;
      padding: 6rpx;
    }
    .selectSecondList{
      margin-top: 50rpx;
      padding: 10rpx 100rpx;
      display: flex;
      flex-wrap: wrap;
      gap: 20rpx;

      .itemText{
        font-weight: 400;
        font-size: 11.7rpx;
        color: #201844;
        letter-spacing: 0;
        text-align: center;
        line-height: 16rpx;
        background: #FFFFFF;
        border-radius: 19.11rpx;
        padding: 5rpx 10rpx;
      }
    }
  }
}

::v-deep .uni-slider-handle-wrapper {
  height: 4rpx;
}

::v-deep .uni-slider-handle {
  border: 2rpx solid #09EBCF;
}

::v-deep .uni-slider-track {
  background-image: url("@/static/image/slider_bg.png");
  background-size: 330.29rpx;
}
</style>
